import { reactive } from 'vue';
import { useDebounceFn } from '@vueuse/core';

import { TabType } from '/@/components/HTabs';

import { FormSchema } from '/@/components/Table';
import { getDictTypeListApi } from '/@/api/admin/dict';
import { DICT } from '/@/enums/dict';
import { ComplexContainer, PageType, PageTypeEnum } from '/@/components/HComplexPage/typing';
// import { UpdateTypeList } from './components/consts';

import {
  getTableModelTypeTreeApi,
  // getDBTableNamesApi,
  getModelAllListApi,
  MODEL_TYPE,
} from '/@/api/config-center/model-design';
import { getMenuTree } from '/@/api/admin/menu';

export interface DesignInstance {
  getValues: PromiseFn<ComplexContainer>;
}

export const tabCols = [
  {
    label: '基础信息',
    value: 1,
  },
  {
    label: '模型设计',
    value: 2,
  },
];

export const basicSchema: FormSchema[] = [
  {
    field: 'modelName',
    label: '模型名称',
    required: true,
    component: 'Input',
    colProps: { span: 8 },
    componentProps: {
      placeholder: '请输入模型名称',
    },
  },
  {
    field: 'typeId',
    label: '所属分类',
    required: true,
    component: 'ApiTreeSelect',
    colProps: { span: 8 },
    componentProps: {
      placeholder: '请选择所属分类',
      api: getTableModelTypeTreeApi,
    },
  },
  {
    field: 'modules',
    label: '所属模块',
    component: 'ApiTreeSelect',
    colProps: { span: 8 },
    componentProps: {
      placeholder: '请选择所属模块',
      multiple: true,
      labelField: 'name',
      valueField: 'id',
      api: getMenuTree,
    },
  },
  {
    field: 'modelCode',
    dynamicDisabled: true,
    label: '模型编码',
    component: 'Input',
    componentProps: {
      placeholder: '请输入模型编码',
    },
    colProps: { span: 8 },
  },
  {
    field: 'client',
    label: '客户端类型',
    component: 'ApiSelect',
    defaultValue: 0,
    colProps: { span: 8 },
    componentProps: {
      api: getDictTypeListApi,
      valueField: 'intValue',
      allowClear: false,
      params: {
        type: DICT.CLIENT_TYPE,
      },
    },
  },
];

const pageTypeList = [
  {
    label: '多页签',
    value: PageTypeEnum.TAB,
  },
  {
    label: '平铺式',
    value: PageTypeEnum.TILED,
  },
];

export const pageSchema: FormSchema[] = [
  {
    field: 'pageType',
    label: '应用类型',
    required: true,
    component: 'Select',
    defaultValue: PageTypeEnum.TAB,
    componentProps: {
      options: pageTypeList,
    },
  },
  {
    field: 'param',
    label: '窗口参数',
    component: 'InputTextArea',
  },
  {
    field: 'query',
    label: '窗口固定参数',
    component: 'InputTextArea',
  },
];

export const multiTabs: TabType[] = [
  {
    label: '属性',
    value: 1,
    barOffset: 0,
  },
  // {
  //   label: '按钮',
  //   value: 2,
  //   barOffset: 0,
  // },
];
export const tiledTabs: TabType[] = [
  {
    label: '属性',
    value: 1,
    barOffset: 0,
  },
];

const listModuleParam = reactive({
  classify: MODEL_TYPE.LIST,
  modelName: '',
  client: 0,
});
const Tileds: FormSchema[] = [
  {
    field: 'width',
    label: '宽度',
    component: 'Input',
  },
  {
    field: 'height',
    label: '高度',
    component: 'Input',
  },
  // {
  //   field: 'margin',
  //   label: '外边距',
  //   component: 'Input',
  // },
  // {
  //   field: 'padding',
  //   label: '内边距',
  //   component: 'Input',
  // },
];
export const tabSchemas = (pageType: PageType, client = 0): FormSchema[] => {
  const TiledSchemas = pageType === PageTypeEnum.TILED ? Tileds : [];

  listModuleParam.client = client;
  return [
    {
      field: 'label',
      label: '标签名称',
      required: true,
      component: 'Input',
    },
    {
      field: 'value',
      label: '标签编码',
      required: true,
      component: 'Input',
    },
    {
      field: 'componentName',
      label: '自定义组件',
      required: false,
      component: 'Input',
    },

    {
      field: 'modelClassify',
      label: '模型类型',
      required: true,
      component: 'ApiSelect',
      componentProps({ formModel }) {
        return {
          api: getDictTypeListApi,
          labelField: 'label',
          valueField: 'intValue',
          allowClear: false,
          params: {
            type: DICT.MODEL_CLASSIFY,
          },
          onChange(v) {
            listModuleParam.classify = v;
            if (formModel.modelId) {
              formModel.modelId = undefined;
            }
          },
          getPopupContainer: () => document.body,
        };
      },
    },
    {
      required: true,
      field: 'modelId',
      label: '模型',
      ifShow: ({ values }) => values.modelClassify,
      component: 'ApiSelect',
      componentProps({ formModel }) {
        return {
          allowClear: false,
          placeholder: '请绑定模型',
          showSearch: true,
          filterOption: false,
          api: getModelAllListApi,
          labelField: 'modelName',
          valueField: 'modelId',
          immediate: true,
          alwaysLoad: false,
          params: listModuleParam,
          onSearch: useDebounceFn((v) => {
            listModuleParam.modelName = v;
          }, 200),
          onOptionsChange(arr) {
            if (formModel.modelId === undefined && arr.length) {
              formModel.modelId = arr[0].value;
            }
          },
          getPopupContainer: () => document.body,
        };
      },
    },

    ...TiledSchemas,
    {
      field: 'param',
      label: '窗口参数',
      component: 'InputTextArea',
    },
    {
      field: 'query',
      label: '窗口固定参数',
      component: 'InputTextArea',
    },
  ];
};

export const buttonsColumn = async () => {
  const displayTypeList = await getDictTypeListApi({ type: DICT.TABLE_BTN_LOCATION });
  displayTypeList.forEach((el) => {
    el.value = el.intValue;
  });
  return [
    {
      label: '名称',
      class: 'w-20',
      dataIndex: 'label',
      component: 'Input',
      componentProps: {
        placeholder: '请输入名称',
      },
    },
  ];
};
